<template>
	<view class="withdrawal">
		<common-navbar :title="type==1?'余额提现':'佣金提现'" />
		<view class="withdrawal-top-container">
			<view class="withdrawal-laundry-list-top">
				<view class="withdrawal-laundry-list-top-label">
					累计提现金额（元)
				</view>
				<view class="withdrawal-laundry-list-top-value">
					<text style="font-size: 34rpx;">￥</text>{{accumulative.finished}}
				</view>
			</view>
			<view class="top-title">
				<!-- 可提现{{type==1?'余额':'佣金'}}（元） -->
				可提现{{type==1?'余额':'佣金'}}(元)
			</view>
			<view class="top-footer">
				<view class="footer-left">
					<view class="withdrawal-number">
						<text style="font-size: 34rpx;">￥</text>{{withdrawalAmount}}
					</view>
					<view class="no-withdrawal-label">
						未提现金额
					</view>
				</view>
				<view class="footer-right">
					<button class="withdrawal-btn"
						@click="$u.route(`/pages/topup_pay/topUpPay?type=${type}`)">申请提现</button>
				</view>
			</view>
		</view>
		<view class="subsection-wrapper">
			<u-subsection @change="subsectionChange" active-color="#3c9cff" :list="subsectionList" :current="subsectionCurrent" />
		</view>
		<view class="withdrawal-laundry-list-container" v-if="subsectionCurrent == 0">
			<view class="tabs-list">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bg-color="#f2f2f2"
					font-size="28" height="62" inactive-color="#999999" active-color="#333333" :bar-style="barStyle"
					bar-width="84" />
			</view>
			<scroll-view scroll-y class="withdrawal-laundry-list-main" @scrolltolower="scrolltolower">
				<view class="withdrawal-item" v-for="item,index in withdrawalList" :key="item.id"
					@click="$u.route(`/pages_property/withdrawal_detail/withdrawalDetail?id=${item.id}`)">
					<view class="withdrawal-item-top">
						<view class="withdrawal-icon-wrapper"
							:class="(item.withdraw_type==1||item.withdraw_type==3)?'balance':'wx'">

						</view>
						<view class="withdrawal-info-wrapper">
							<view class="info-top-wrapper">
								<view class="title">
									{{item.type==1?'佣金提现':'余额提现'}}
								</view>
								<view class="amount">
									￥{{item.amount}}
								</view>
							</view>
							<view class="info-bottom-wrapper">
								<view class="code">
									编号：{{item.task_code}}
								</view>
								<view class="withdrawal-to">
									取现至：{{item.withdraw_type==1?'余额':item.item.withdraw_type==2?'微信':'收款码转账'}}
								</view>
							</view>
						</view>
					</view>
					<view class="withdrawal-item-bottom">
						<view class="date">
							{{item.created_at}}
						</view>
						<view class="status" :class="item.status == 1?'ongoing':item.status == 2?'success':'fail'">
							{{item.status == 1?'待处理':item.status == 2?'审核成功':'审核失败'}}
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</scroll-view>
		</view>
		<view class="balance-list-container" v-if="subsectionCurrent == 1">
			<view class="title">
				账户明细
			</view>
			<scroll-view scroll-y style="max-height: 700rpx;" @scrolltolower="balanceScrolltolower">
				<u-collapse :arrow="false">
					<u-collapse-item :title="item.remark" v-for="(item, index) in balanceList" :key="index"
						@change="getBalanceItemDetail($event,item)">
						<view class="item-title" slot="title">
							<view class="icon-wrapper">
								<u-icon name="arrow-down-fill" class="arrow-icon" :class="{'active':item.active}"
									size="20"></u-icon>
							</view>
							<view class="title-main">
								<view class="title-top">
									<view class="top-title">
										{{item.remark}}
									</view>
									<view class="top-amount"
										:class="Number(item.amount_change)>0?'increase':'decrease'">
										{{item.amount_change}}
									</view>
								</view>
								<view class="created-time">
									创建时间:{{item.created_at}}
								</view>
							</view>
						</view>
						<view class="item-content" slot="content">
							<view class="content-item">
								下单人: {{item.customer_info.nickname}}
							</view>
							<view class="content-item">
								下单人手机号: {{item.customer_info.phone}}
							</view>
							<view class="content-item">
								工单编号: {{item.detail.task_code}}
							</view>
							<view class="content-item">
								冻结余额: ￥{{item.detail.freeze_balance}}
							</view>
							<view class="content-item">
								佣金余额: ￥{{item.detail.commission_balance}}
							</view>
							<view class="content-item">
								账户余额: ￥{{item.detail.balance}}
							</view>
							<view class="content-item">
								备注: {{item.detail.remark}}
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
				<u-loadmore :status="status" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				current: 0,
				list: [{
					name: '处理中',
					value: 1,
				}, {
					name: '已提现',
					value: 2,
				}, {
					name: '已退回',
					value: 3,
				}, {
					name: '全部',
					value: '',
				}],
				subsectionList: [{
						name: '提现记录'
					},
					{
						name: '账户明细'
					},
				],
				subsectionCurrent: 0,
				barStyle: {
					borderRadius: '10rpx',
					backgroundColor: '#46a3f4',
					height: '8rpx',
				},
				type: 1,
				withdrawalAmount: '',
				accumulative: {
					pending: '0.00',
					finished: '0.00',
				},
				pageNum: 1,
				pageSize: 10,
				withdrawalList: [],
				balanceList: [],
				balancePageNum: 1,
				balancePageSize: 6,
				balanceStatus: 'loadmore',
			}
		},
		async onLoad(options) {
			await this.$loginStatus;
			this.type = options.type;
			this.getAmount();
			this.getWithdrawalList();
			this.getAccumulativeWithdrawal();
			this.getbalanceList();
		},
		methods: {
			async getbalanceList() {
				if (this.balanceStatus == 'nomore') {
					return
				}
				this.balanceStatus = 'loading';
				const {
					data
				} = await this.$u.post(this.$restUrl.getWalletList, {
					page: this.balancePageNum,
					page_num: this.balancePageSize,
				});
				this.balanceList.push(...data.data);
				if (this.balanceList.length >= data.total) {
					this.balanceStatus = 'nomore';
				} else {
					this.balancePageNum++;
					this.balanceStatus = 'loadmore';
				}
				console.log('this.balanceList', this.balanceList);
			},
			balanceScrolltolower() {
				this.getbalanceList();
			},
			async getBalanceItemDetail(e, item) {
				for (let i of this.balanceList) {
					this.$set(i, 'active', false);
				}
				this.$set(item, 'active', e.show);
				if (e.show && !item.detail) {
					const {
						data
					} = await this.$u.post(this.$restUrl.getWalletItemDetail, {
						flow_id: item.id
					})
					this.$set(item, 'detail', data);
				}
			},
			change(index) {
				this.current = index;
				this.withdrawalList = [];
				this.pageNum = 1;
				this.getWithdrawalList();
			},
			async getAmount() {
				const {
					balance,
					commission_balance
				} = (await this.$u.post(this.$restUrl.getAmount)).data;
				if (this.type == 1) {
					this.withdrawalAmount = balance;
				} else {
					this.withdrawalAmount = commission_balance;
				}
			},
			scrolltolower() {
				this.getWithdrawalList();
			},
			async getWithdrawalList() {
				if (this.status == 'loading') {
					return
				}
				this.status = 'loading';
				const {
					data
				} = await this.$u.post(this.$restUrl.getWithdrawalList, {
					page_num: this.pageSize,
					page: this.pageNum,
					status: this.list[this.current].value,
					withdraw_channel: this.type == 1 ? 2 : 1,
				})
				this.pageNum++;
				this.withdrawalList.push(...data.data);
				this.status = data.data.length ? 'loadmore' : 'nomore';
			},
			async getAccumulativeWithdrawal() {
				const {
					data
				} = await this.$u.post(this.$restUrl.getAccumulativeWithdrawal, {
					type: this.type == 1 ? 2 : 1,
				})
				this.accumulative = data;
			},
			subsectionChange(index){
				this.subsectionCurrent = index;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./withdrawal.scss";
</style>
